<template>
  <div>
    <a-row>
      <a-col :span="6" style="text-align: center;">
        <a-progress type="dashboard" :percent="memoryPercent" :strokeWidth="10"/>
        <div>内存</div>
      </a-col>
      <a-col :span="18">
        <div>
          <table>
            <tr>
              <td>Operating System</td>
              <td>{{metrics['OS']['OperatingSystem']['Name']}} ({{metrics['OS']['OperatingSystem']['Version']}})</td>
            </tr>
            <tr>
              <td>JVM</td>
              <td>{{metrics['OS']['Runtime']['VmName']}} ({{metrics['OS']['Runtime']['SpecVersion']}})</td>
            </tr>
            <tr>
              <td>CPU Load</td>
              <td>{{metrics['OS']['OperatingSystem']['SystemCpuLoad'].toFixed(2)}}</td>
            </tr>
            <tr>
              <td>CPU Processors</td>
              <td>{{metrics['OS']['OperatingSystem']['AvailableProcessors']}}</td>
            </tr>
            <tr>
              <td>Total Memory Size</td>
              <td>{{getStandardizeBytes(metrics['OS']['OperatingSystem']['TotalPhysicalMemorySize'])}}</td>
            </tr>
            <tr>
              <td>Free Memory Size</td>
              <td>{{getStandardizeBytes(metrics['OS']['OperatingSystem']['FreePhysicalMemorySize'])}}</td>
            </tr>
          </table>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import {standardizeBytes} from '@/utils/util'

  export default {
    name: "BrokerOSMetric",
    props: {
      metrics: {
        default: () => {
          return {}
        }
      },
    },
    data() {
      return {}
    },
    created() {
    },
    computed: {
      memoryPercent() {
        return (1 - this.metrics['OS']['OperatingSystem']['FreePhysicalMemorySize'] / this.metrics['OS']['OperatingSystem']['TotalPhysicalMemorySize']).toFixed(2) * 100
      }
    },
    methods: {
      getStandardizeBytes(bytes) {
        return standardizeBytes(bytes)
      }
    }
  }
</script>

<style scoped>
</style>